<template>
  <div class="Detail">
    <div class="page-head">
      <div class="page-bread">
        <div class="bread-prev" @click="back">
          设备状态
        </div>
        <div class="bread-divider">
          /
        </div>
        <div class="bread-now">
          查看详情
        </div>
      </div>
    </div>
    <div class="detail-content">
      <div class="detail-left">
        <div v-for="item in leftNavs" :key="item.key" class="left-nav" :class="{'active': item.key === curNav.key}" @click="change(item)">
          {{item.value}}
        </div>
      </div>
      <div class="detail-right">
        <div class="right-title">
          <span>
            {{curNav.value}}
          </span>
          <div v-if="curNav.key == 1" class="pickTime2 singPicktime right-picker">
            <date-range-picker
              @passDate="passTmpDate" 
              :startTime="new Date(new Date()-6*24*3600000).toLocaleDateString()" 
              :endTime="new Date().toLocaleDateString()"
            />
          </div>
        </div>
        <div class="right-con">
          <component :is="curNav.comp"></component>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { leftNavs } from '@/consts/codesMap'
import baseInfo from '@/components/views/detail/baseInfo'
import monitorInfo from '@/components/views/detail/monitorInfo'

export default {
  components: {
    baseInfo,
    monitorInfo
  },
  data() {
    return {
      leftNavs: JSON.parse(JSON.stringify(leftNavs)),
      curNav: JSON.parse(JSON.stringify(leftNavs))[0]
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    
    change(item) {
      this.curNav = item
    },

    passTmpDate (v) {
      this.$store.commit('setState', {
        name: 'detailTime',
        value: v
      })
    },
  },
  created () {
    let navs = JSON.parse(JSON.stringify(leftNavs))
    this.leftNavs = navs
    this.curNav = navs[0]
  },
}
</script>

<style lang="stylus">
.Detail {
  .detail-content {
    height: getPx(730);
    padding: getPx(40);
    display: flex;
    justify-content: space-between; 
    .detail-left {
      box-sizing: border-box;
      padding: getPx(20) 0 0 getPx(20);
      width: getPx(180);
      height: 100%;
      background: #fff;
      .left-nav {
        box-sizing: border-box;
        width: getPx(160);
        height: getPx(48);
        line-height: getPx(48); 
        font-size: getPx(16);
        padding-left: getPx(35);
        color: $page-title-color;
        cursor: pointer; 
        &.active {
          background: #74c8f6;
          color: #fff;
          font-size: getPx(18);
          border-radius: getPx(24) 0 0 getPx(24);
        }
      }  
    }
    .detail-right {
      width: getPx(1510);
      height: 100%;
      margin-left: getPx(25);
      .right-title {
        font-size: getPx(22);
        color: $page-title-color;
        margin-bottom: getPx(25);
      }
      .right-con {
        height: getPx(678);
        background: #fff;
        overflow-y: auto;
      }  
    } 
  }

}
</style>